<template>
  <div class="app-container">
    <span style=" display: flex">
      <el-button
        type="primary"
        @click="$router.push('/main/biao/zerenshu')"
        icon="el-icon-back"
        >返回</el-button
      >
    </span>
    <h2>岗位职责目标责任书列表</h2>
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="姓名" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.department" placeholder="部门" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="success" icon="el-icon-plus" @click="handleCreate">
        新增
      </el-button>
      <!-- <el-button class="filter-item" type="primary" @click="goBack">
        返回
      </el-button> -->

    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="部门" prop="department" />
      <el-table-column label="岗位" prop="position" />
      <el-table-column label="入职日期" prop="entryDate" width="180">
        <template slot-scope="{row}">
          {{ row.entryDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleDetail(row)">
            详情
          </el-button>
          <el-button type="primary" size="mini" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
  </div>
</template>

<script>
import { getZerenshuList, deleteZerenshu } from '@/api/zerenshu'
import Pagination from '@/components/Pagination'

export default {
  name: 'ZerenshuList',
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        name: undefined,
        department: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        employeeId: [{ required: true, message: '请输入工号', trigger: 'blur' }],
        // ... 其他必填字段的验证规则
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      try {
        const { data } = await getZerenshuList(this.listQuery)
        console.log('获取列表：', data)
        this.list = data.data
        this.total = data.total
      } catch (error) {
        console.error('获取列表失败:', error)
        this.$message.error('获取列表失败')
      }
      this.listLoading = false
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleCreate() {
      this.$router.push('/main/biao/zerenshu')
    },
    handleDetail(row) {
      this.$router.push({
        path: '/main/biao/zerenshu',
        query: {
          id: row.id,
          type: 'view'
        }
      })
    },
    handleEdit(row) {
      this.$router.push({
        path: '/main/biao/zerenshu',
        query: {
          id: row.id,
          type: 'edit'
        }
      })
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该记录吗？', '提示', {
          type: 'warning'
        })
        await deleteZerenshu(row.id)
        this.$message.success('删除成功')
        this.getList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败')
        }
      }
    },
    goBack() {
      this.$router.push('/main/biao/zerenshu')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 24px;
  // background: #ffffff;
  border-radius: 8px;
  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - 48px);
  width: 1200px;
  margin: 0 auto;
}

.filter-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px;
  margin-bottom: 24px;
  background: #f5f7fa;
  border-radius: 8px;

  .filter-item {
    margin: 0;

    &.el-input {
      width: 220px;

      .el-input__inner {
        border-radius: 4px;

        &:hover {
          border-color: #409EFF;
        }

        &:focus {
          border-color: #409EFF;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }
      }
    }

    &.el-button {
      font-weight: 500;
      transition: all 0.3s;
      border-radius: 4px;
      padding: 8px 13px;
      font-family: '宋体';
      font-size: 1em;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      &.el-button--primary {
        background: #409EFF;
        border-color: #409EFF;
      }
    }
  }
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;

  &::before {
    display: none;
  }

  .el-table__header {
    th {
      background: #f5f7fa;
      color: #2c3e50;
      font-weight: 600;
      padding: 16px 0;
      border-bottom: 1px solid #ebeef5;
    }
  }

  .el-table__body {
    td {
      padding: 16px 0;
      border-bottom: 1px solid #ebeef5;
    }
  }

  .el-table__row {
    transition: all 0.3s;

    &:hover {
      background-color: #f5f7fa;

      td {
        background-color: transparent;
      }
    }
  }

  .el-button {
    padding: 8px 16px;
    margin: 0 4px;
    border-radius: 4px;
    font-size: 13px;

    &--primary {
      background: #409EFF;
      border-color: #409EFF;

      &:hover {
        background: #66b1ff;
        border-color: #66b1ff;
      }
    }

    &--danger {
      background: #f56c6c;
      border-color: #f56c6c;

      &:hover {
        background: #f78989;
        border-color: #f78989;
      }
    }
  }
}

.pagination-container {
  padding: 24px 0;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .app-container {
    padding: 16px;
  }

  .filter-container {
    padding: 16px;
    flex-direction: column;
    align-items: stretch;

    .filter-item {
      width: 100% !important;

      &.el-button {
        margin-top: 8px;
      }
    }
  }

  .el-table {
    .el-button {
      padding: 6px 12px;
      margin: 4px;
    }
  }
}

/* 打印样式 */
@media print {
  .app-container {
    padding: 0;
    box-shadow: none;
  }

  .filter-container,
  .pagination-container {
    display: none;
  }

  .el-table {
    border: 1px solid #000;

    th,
    td {
      border: 1px solid #000;
    }
  }
}
</style>